<template>
  <div class="personal-mertis-box">
    <div v-if="personList.length" class="mertis-box">
      <div v-for="item in personList" :key="item.id" class="mertis-item">
        <div class="mertis-item-title">
          {{ item.title || item.name }}
        </div>
        <div class="mertis-item-result">
          <div class="result-label">考核结果</div>
          <div class="result-value" :class="getClass(item.scoreLevel)">
            {{ item.scoreLevel }}
          </div>
        </div>
      </div>
    </div>
    <van-empty v-else description="暂无数据，季度考核结束后查看" />
  </div>
</template>
<script>
import { getPersonMerits } from '@api/api-merits.js'
export default {
  name: 'PersonalPerformance',
  data() {
    return {
      personList: [], // 个人绩效考核数据
    }
  },
  created() {
    this.getPersonalMerits()
  },
  methods: {
    getPersonalMerits() {
      let { loginPostInfo = {} } = JSON.parse(localStorage.userInfo)
      getPersonMerits({
        currentPage: 1,
        pageSize: 10,
        param: {
          grainDate: '', // 第几季度
          title: '',
          year: '',
          organId: loginPostInfo.orgId || '',
        },
      }).then(res => {
        let { content = [] } = res.data
        this.personList = content
      })
    },
    getClass(level) {
      switch (level) {
        case '好':
          return 'level_1'
        case '较好':
          return 'level_2'
        case '一般':
          return 'level_3'
        case '较差':
          return 'level_4'
        default:
          break
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.personal-mertis-box {
  padding-bottom: 30px;
  .mertis-box {
    padding: 10px 20px;
    .mertis-item {
      border-radius: 5px;
      margin-top: 10px;
      background-color: #ffffff;
    }
    .mertis-item-title {
      font-weight: bold;
      margin-bottom: 10px;
      border-bottom: 1px solid #ebeef5;
      padding: 12px 15px;
    }
    .mertis-item-result {
      width: 100%;
      padding: 0 15px 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .result-value {
      font-size: 16px;
      font-weight: bold;
      color: #999999;
    }
    .level_1 {
      color: #2dc005;
    }
    .level_2 {
      color: #29bfc5;
    }
    .level_3 {
      color: #c5a229;
    }
    .level_4 {
      color: #666666;
    }
  }
}
</style>
